<!-- 时间轴 -->
<template>
    <div class="box">
		<div class="timeAxis-box"  @click="show">
			<!-- <img src="../assets/sj.png" alt="" :style="{'left': left+'%'}"> -->
			<a-icon type="caret-down" class="Pointer" :style="{'left': left+'%'}"/>
			<div class="top-line">
				<div class="line-div" ></div>
				<div class="line" :style="{'width': width+'%'}" ></div>
			</div>
			<div class="bottom-div">
				<div 
				v-for="(item,index) in list" 
				:key="index"
				:style="{'color':item.time?'#ffffff':''}"
				>
					{{item.name}}
				</div>
			</div>
		</div>
    </div>
</template>

<script>
  export default {
    name: "timeAxis",
	props:{
		width:{   // 可选字段，有默认值
		  default: 90
		}
	},
    data(){
      return{
		list:[
			{name:'2020',time:true},
			{name:'四月',time:false},
			{name:'七月',time:false},
			{name:'十月',time:false},
			{name:'2021',time:true},
			{name:'四月',time:false},
			{name:'七月',time:false},
			{name:'十月',time:false},
			{name:'2022',time:true},
			{name:'四月',time:false},
		],
		left:-0.5
      }
    },
    methods:{
		show(e) {
			// 当前位置/获取屏幕宽度  *100
			let num = ((e.pageX/document.body.clientWidth)*100)
			this.left = ((num/90)*100)-6
		}
    },
    mounted() {
		
    },
    destroyed() {
		
    }
  }
</script>

<style scoped lang="less">
	.box{
		 
		display: flex;
		justify-content: center;
		position: relative;
		
	}
	.timeAxis-box{
		width: 90%;
		position: relative;
		cursor: pointer;
		.Pointer{
			width: 20px;
			height: 16px;
			position: absolute;
			top: -10px;
			left: 10px;
			z-index: 999;
			font-size: 20px;
			color: rgb(152,248,255);
		}
	}
	.top-line{
		width: 100%;
		height: 8px;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: center;
		.line-div{
			width: 100%;
			height: 1px;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0,-50%);
		}
		.line{
			height: 100%;
			border-radius: 5px;
			background-color: rgba(255,255,255,0.9);
		}
	}
	.bottom-div{
		width: 100%;
		height: 32px;
		padding:0 4.9%;
		box-sizing: border-box;
		display: flex;
		flex-flow:row wrap;
		justify-content: space-between;
		div{
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 0.8125rem;
			position: relative;
			font-size: 11px;
			color: rgba(255,255,255,0.6);
		}
	}
	.bottom-div>div:before {
		position: absolute;
		content: "";
		width: 1px;
		height: 11px;
		background: rgba(255,255,255,0.8);
		top:-4px;
		left: 50%;
		transform: translate(-50%,0);
	 }
</style>